<template>
  <el-container id="app">
    <el-header height="50px">
      <div class="logo">
        <img src="./assets/64.png" />
        <span>具映</span>
      </div>
      <div class="tools">
        <!-- todo 搜索组件 -->
      </div>
      <Contorls />
    </el-header>
    <el-container>
      <el-aside width="160px">
        <Aside />
      </el-aside>
      <el-main>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Contorls from "./components/header/Contorls";
import Aside from "./components/aside/Aside";
export default {
  name: "app",
  components: {
    Contorls,
    Aside,
  },
};
</script>

<style lang="less">
@font-face {
  font-family: "appfont";
  src: url(./assets/font/appfont.ttf);
}
* {
  padding: 0;
  margin: 0;
  user-select: none;
  color: rgb(228, 233, 237);
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  &::-webkit-scrollbar {
    width: 10px;
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgb(71, 92, 112);
    &:hover {
      background: rgba(71, 92, 112, 0.9);
    }
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
  }
}
html,
body,
#app {
  height: 100%;
}
img {
  -webkit-user-drag: none;
}
#app {
  .el-header {
    padding: 0;
    background-color: rgb(43, 55, 67);
    -webkit-app-region: drag;
    display: flex;
    .tools {
      flex: 1;
    }
    .logo {
      flex: none;
      height: 100%;
      width: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset -1px -1px rgba(106, 106, 106, 0.2);
      img {
        height: 36px;
      }
      span {
        padding-left: 5px;
        font-family: appfont;
        font-size: 22px;
      }
    }
  }
  .el-aside {
    background-color: rgb(43, 55, 67);
  }
  .el-main {
    background-color: rgb(31, 44, 53);
    padding: 0;
  }
}
</style>
